<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>订单详情--活动实时交易情况</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css"/>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/swiper4.min.css" />
    <script src="__SCRIPT__/echarts.min.js" ></script>
    <style>

        .box{
            width:1180px;
            margin:0 auto;
        }
        .hidden {
            display: none !important;
        }
        .tit{
            font-size:22px;
            font-weight:600;
            color:rgba(51,51,51,1);
            padding-top:32px;
            padding-bottom:24px;
        }
        .card{
            width:330px;
            height:164px;
            background:rgba(255,255,255,1);
            margin-right:20px;
            margin-bottom:20px;
            padding-top:48px;
            padding-left:40px;
            box-sizing: border-box;
        }
        .right{
            width:482px;
            height:348px;
            background:rgba(255,255,255,1);
        }
        .time1{
            font-size:40px;
            font-weight:600;
            color:rgba(51,51,51,1);
            margin-bottom:8px;
        }
        .time2{
            font-size:16px;
            font-weight:400;
            color:rgba(153,153,153,1);
        }
        .rtit{
            font-size:22px;
            font-weight:600;
            color:rgba(51,51,51,1);
            padding:20px 42px;
        }
        .circle{
            width:100%;
            height:190px;
            text-align: center;
        }
        .time3{
            font-size:14px;
            font-weight:400;
            color:rgba(153,153,153,1);
            padding-top:32px;
            padding-left:10px;
            text-align: center;
        }
        .time3 span:nth-child(3n+2){
            padding-left:25px;
            padding-right:25px;
        }
        .route{
            padding:20px 40px 24px;
            box-sizing: border-box;
            background-color: #fff;
            margin-bottom:40px;
        }
        .rtit2{
            font-size:22px;
            font-weight:600;
            color:rgba(51,51,51,1);
            padding-bottom:16px;
        }
        .map{
            width:1100px;
            height:460px;
            z-index: 999;
        }
        #order,
        #about,
        #user {
            display: none;
        }
    </style>
</head>
<body>
{include file="public/header"}
<div class="box">
    <div class="tit">活动实时交易情况</div>
    <div class="flex-wrap">
        <div>
            <div class="card">
                <div class="time1" style="font-size: 26px;line-height: 50px">
                    {$data.order_zcsj_time ?: '--:--:--'}
                </div>
                <div class="time2">行程开始时间</div>
            </div>
            <div class="card">
                <div class="time1" id="shengyu">--:--:--</div>
                <div class="time2">预计剩余时间</div>
            </div>
        </div>
        <div>
            <div class="card">
                <div class="time1" style="font-size: 26px;line-height: 50px">
                    {$data.order_xhsj_time ?: '--:--:--'}
                </div>
                <div class="time2">行程完成时间</div>
            </div>
            <div class="card">
                <div class="time1">{$data.tast_time ?: '--:--:--'}</div>
                <div class="time2">行程总计时间</div>
            </div>
        </div>
        <div class="right">
            <div class="rtit">完成进度</div>
            <div class="circle" id="circle"></div>
            <div class="time3"><span id="nowtime">{$nowTime}</span></div>
        </div>
    </div>
    <div class="route">
        <div class="rtit2">预计行驶路线</div>
        <div class="map">
            <div id="container" style="height: 460px;width: 70%;float: left;"></div>
            <div id="panel" style="height: 460px;width: 29%;float: right;overflow: scroll"></div>
        </div>
    </div>
</div>
<!---->
<input type="hidden" id="lon1" value="{$data.order_go_lon}" />
<input type="hidden" id="lat1" value="{$data.order_go_lat}" />
<input type="hidden" id="lon2" value="{$data.order_to_lon}" />
<input type="hidden" id="lat2" value="{$data.order_to_lat}" />

<input type="hidden" id="timecha" value="{$data.time_cha}" />
<input type="hidden" id="baifenbi" value="{$baifenbi}" />
<!---->
<!---->
<input type="hidden" id="mwwX" value="{$mwwX}" />
<input type="hidden" id="mwwD" value="{$mwwD}" />
<!---->
</body>
</html>
<script src="https://webapi.amap.com/maps?v=1.4.15&key=3108d268226b46915b5faa028a004245&plugin=AMap.Driving"></script>
<script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
<script type="text/javascript" src="__SCRIPT__/xydd.js"></script>
<script src="/static/admin/js/jquery.min.js"></script>
<script>

    //基本地图加载
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [116.397428, 39.90923],//地图中心点
        zoom: 13 //地图显示的缩放级别
    });
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        panel: "panel"
    });
    // 根据起终点经纬度规划驾车导航路线
    var lon1 = $('#lon1').val();
    var lat1 = $('#lat1').val();
    var lon2 = $('#lon2').val();
    var lat2 = $('#lat2').val();
    driving.search(new AMap.LngLat(lon1, lat1), new AMap.LngLat(lon2, lat2), function(status, result) {
        // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
        if (status === 'complete') {
            console.log(result)
            var timecha = parseInt($('#timecha').val());
            var bfb = $('#baifenbi').val();
//            // 构造点标记
            var rou_s = result['routes'][0]['steps'].length;
            var mark_lat = result['routes'][0]['steps'][1]['end_location']['lat'];
            var mark_lon = result['routes'][0]['steps'][1]['end_location']['lng'];

            if(bfb == 0){
                if(timecha >= 0){
                    var alltime = parseInt(result['routes'][0]['time']);
                    var timevalue = alltime - timecha;
                    if(timevalue > 0){
                        var hh = Math.floor(timevalue / 3600);
                        var ii = Math.floor((timevalue % 3600) / 60);
                        var ss = timevalue % 60;
                        if(hh < 10){
                            hh = '0'+hh;
                        }
                        if(ii < 10){
                            ii = '0'+ii;
                        }
                        if(ss < 10){
                            ss = '0'+ss;
                        }
                        $('#shengyu').text(hh + ':' + ii + ':' + ss);
                        //
                        var prep = parseInt(timecha * 100/alltime);
                        //点位置
                        var r_i = Math.floor((rou_s * prep)/100);
                        mark_lat = result['routes'][0]['steps'][r_i-1]['end_location']['lat'];
                        mark_lon = result['routes'][0]['steps'][r_i-1]['end_location']['lng'];
                        six('circle',prep,100-prep,'','','#01A1FF',prep);
                    }else{
                        //已超过预估时间了
                        mark_lat = result['routes'][0]['steps'][rou_s-2]['end_location']['lat'];
                        mark_lon = result['routes'][0]['steps'][rou_s-2]['end_location']['lng'];
                        six('circle',90,10,'','','#01A1FF',90);
                    }
                }else{
                    mark_lat = result['routes'][0]['steps'][0]['end_location']['lat'];
                    mark_lon = result['routes'][0]['steps'][0]['end_location']['lng'];
                    six('circle',0,0,'','','#01A1FF',0);
                }
            }else{
                mark_lat = result['routes'][0]['steps'][rou_s-1]['end_location']['lat'];
                mark_lon = result['routes'][0]['steps'][rou_s-1]['end_location']['lng'];
                six('circle',100,0,'','','#01A1FF',100);
            }
            mark_lon = $('#mwwD').val();
            mark_lat = $('#mwwX').val();
            if(mark_lon != 0 && mark_lat != 0){
                var marker = new AMap.Marker({
                    icon: "__IMG__/car.png",
                    position: [mark_lon, mark_lat]
                });
                map.add(marker);
            }

        } else {
            log.error('获取数据失败：' + result)
        }
    });
    //
    function six(div,up,down,up_str,down_str,color,present) {
        if(up == 0){
            color = '#F2F2F4';
        }
        var myChart = echarts.init(document.getElementById(div));
        var option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            title: {
                subtext: present+'%',
                x: 'center',
                y: 'center',
                top: '35%',
                subtextStyle: {
                    fontSize: 40,
                    color: '#59ADFE',
                    fontWeight: 400
                }
            },
            series: [
                {
                    name: '进度',
                    type: 'pie',
                    radius: ['85%', '90%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: false,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        {value: up, name: up_str},
                        {value: down, name: down_str}
                    ],
                    itemStyle: {
                        normal: {
                            color: function (params) { // 给出颜色组
                                var colorList = [color, '#F2F2F4'];
                                return colorList[params.dataIndex]
                            }
                        }
                    }
                }
            ]
        };
        myChart.setOption(option);
    }
</script>